<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<div class="box">
    <span>span 1</span>
    <p>span 2</p>
    <span>span 3</span>
    <!-- <span>span 4</span> -->
    <span>span 5</span>
    <p>p 2</p>
</div>

<!-- jQuery -> 频繁操作DOM节点 -->

<!-- 
    思考：在浏览器地址栏输入一个网址，按下回车后，中间发生了什么？
    比如输入 https://www.atguigu.com/html5 按下回车
    1.查询浏览器缓存，如果之前有访问记录，直接访问缓存资源
    2.DNS域名解析，将域名解析为对应IP地址（找到服务器IP地址）
    3.TCP三次握手建立连接（浏览器和服务器建立数据传输通道）
    4.使用http或https协议传输数据
    5.浏览器给服务器发送请求报文
    6.服务器给浏览器发送响应报文
    7.TCP四次挥手断开连接
    8.渲染页面（处理数据）
        从上到下解析html文档构建节点树
        解析CSS样式构建样式树
        根据节点树和样式树计算生成渲染树
        根据渲染树绘制页面

        重绘 重排

        JS引擎线程

        。。。
 -->

</body>
</html>